import { InfoCircleOutlined } from '@ant-design/icons';
import { TinyArea, TinyColumn, Progress } from '@ant-design/charts';
import { Col, Row, Tooltip } from 'antd';

import numeral from 'numeral';
import { ChartCard, Field } from './Charts';
import type { DataItem, TaskChartsData } from '../data';
import Trend from './Trend';
import styles from '../style.less';

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: { marginBottom: 24 },
};

const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: TaskChartsData }) => (
  <Row gutter={24}>
    <Col {...topColResponsiveProps}>
      <ChartCard
        loading={loading}
        bordered={false}
        title="发送进度"
        action={
          <Tooltip title="当前任务的发送进度">
            <InfoCircleOutlined />
          </Tooltip>
        }
        total={visitData.progress + '%'}
        footer={
          <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
            <Trend flag="down">
              失败率
              <span className={styles.trendText}>{visitData.fail_rate}</span>
            </Trend>
          </div>
        }
        contentHeight={46}
      >
        <Progress
          height={46}
          percent={visitData.progress / 100}
          color="#13C2C2"
          forceFit
          size={8}
        />
      </ChartCard>
    </Col>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title="链接点击"
        action={
          <Tooltip title="点击短信链接的数量">
            <InfoCircleOutlined />
          </Tooltip>
        }
        total={numeral(visitData.click_charts.total).format('0,0')}
        footer={
          <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
            <Trend flag="up">
              点击率
              <span className={styles.trendText}>{visitData.click_charts.click_rate}</span>
            </Trend>
          </div>
        }
        contentHeight={46}
      >
        <TinyArea
          color="#975FE4"
          xField="key"
          height={46}
          forceFit
          yField="value"
          smooth
          data={visitData.visit_data}
        />
      </ChartCard>
    </Col>
    {/*<Col {...topColResponsiveProps}>*/}
    {/*  <ChartCard*/}
    {/*    bordered={false}*/}
    {/*    title="小程序访问"*/}
    {/*    action={*/}
    {/*      <Tooltip title="访问小程序的次数；小程序到达率指：点击短信链接/访问小程序数；企微率指：加企微数/访问小程序数">*/}
    {/*        <InfoCircleOutlined />*/}
    {/*      </Tooltip>*/}
    {/*    }*/}
    {/*    loading={loading}*/}
    {/*    total={visitData.mp_charts?.total}*/}
    {/*    footer={*/}
    {/*      <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>*/}
    {/*        <Trend flag="up">*/}
    {/*          到达率*/}
    {/*          <span className={styles.trendText}>{visitData.mp_charts?.mp_rate}</span>*/}
    {/*        </Trend>*/}
    {/*      </div>*/}
    {/*    }*/}
    {/*    contentHeight={46}*/}
    {/*  >*/}
    {/*    <Trend flag="up" style={{ marginRight: 16 }}>*/}
    {/*      添加企微*/}
    {/*      <span className={styles.trendText}>{visitData.wecom_charts?.total}</span>*/}
    {/*    </Trend>*/}
    {/*    <Trend flag="up">*/}
    {/*      加企微率*/}
    {/*      <span className={styles.trendText}>{visitData.wecom_charts?.wecom_rate}</span>*/}
    {/*    </Trend>*/}
    {/*  </ChartCard>*/}
    {/*</Col>*/}
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title="投保成功"
        action={
          <Tooltip title="投保成功的次数；投保率指：点击短信链接/访问投保成功页面">
            <InfoCircleOutlined />
          </Tooltip>
        }
        total={numeral(visitData.insurance_policy_charts?.total).format('0,0')}
        footer={<Field label="投保率" value={visitData.insurance_policy_charts?.policy_rate} />}
        contentHeight={46}
      >
        <TinyColumn xField="key" height={46} forceFit yField="value" data={visitData.visit_data} />
      </ChartCard>
    </Col>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title="升级成功"
        action={
          <Tooltip title="升级升级成功的次数；升级率指：点击短信链接/访问升级成功页面">
            <InfoCircleOutlined />
          </Tooltip>
        }
        total={numeral(visitData.insurance_policy_upgrade_charts?.total).format('0,0')}
        footer={<Field label="升级率" value={visitData.insurance_policy_upgrade_charts?.policy_rate} />}
        contentHeight={46}
      >
        <TinyColumn xField="key" height={46} forceFit yField="value" data={visitData.visit_data} />
      </ChartCard>
    </Col>
  </Row>
);

export default IntroduceRow;
